<!--考生信息-->
<template>
  <div>
    <div>
      <el-form :inline="true" :model="requestData" style="width: 100%;margin-bottom: 20px;">

        <el-input size="mini" v-model="requestData.map.user_id"  placeholder="用户id" style="width: 12%;"></el-input>
        <el-input size="mini" v-model="requestData.map.user_name"  placeholder="用户名" style="width: 12%;"></el-input>
        <el-input size="mini" v-model="requestData.map.user_nick_name"  placeholder="用户昵称" style="width: 12%;"></el-input>

        <el-button size="mini" type="success" icon="el-icon-search" @click="searchUser">查询</el-button>
        <el-button size="mini" icon="el-icon-search" @click="clearSearchInfo">重置</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteUserList">删除</el-button>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_id"
        label="用户id"
        minWidth="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_name"
        label="用户名"
        minWidth="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_nick_name"
        label="昵称"
        minWidth="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_sex"
        label="性别"
        minWidth="120">
      </el-table-column>
      <el-table-column
        label="操作"
        minWidth="180"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini"  @click="editUser(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="success" @click="editUserPassword(scope.$index, scope.row)">修改密码</el-button>
          <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40,50]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <edit-user-dialog v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog" :userData="userData" @editUserClose="closeDialog"></edit-user-dialog>
    <!--修改密码-->
    <update-user-pwd-dialog v-if="isShowUpdatePwdDialog" :isShowUpdatePwdDialog="isShowUpdatePwdDialog" :updatePwdData="updatePwdData" @updateUserPwdClose="closeDialog"></update-user-pwd-dialog>

  </div>
</template>
<script>
  import{getRoomUserInfo,deleteAlreadyUser} from "@/api/invigilate";
  import editUserDialog from '../../super/user/component/EditUserInfo.vue';
  import updateUserPwdDialog from '../../super/user/component/updatepawword.vue';
  export default{
      components:{
        editUserDialog,
        updateUserPwdDialog
      },
      created(){
          this.getTableData();
      },
    data(){
      return {
        tableData:[],
        selectList:[],
        isShowEditDialog : false,
        isShowUpdatePwdDialog:false,
        pageInfo:{
          page:1,//页数
          size:10, //页面大小
          total:0 //页总数
        },
        requestData:{
          pageSize:10,
          pageNum:1,
          map:{
            user_id:"",
            user_name:"",
            user_nick_name:"",
          }
        }
      }
    },
    methods:{
      getTableData(){
        this.tableData = [];
        getRoomUserInfo(this.requestData).then(res=>{
            if(res.code == 200){
              this.tableData = res.data.data;
            }
        })
      },
      searchUser(){
        this.getTableData();
      },

      deleteUserList(){
        if(this.selectList == null || this.selectList.length <= 0){
          this.$message({
            type: 'warning',
            message: '请至少选择一行要删除的数据'
          });
        }else{
          this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteAlreadyUser(this.selectList).then(res=>{
              if(res.code == 200){
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                this.selectList = [];
                this.getTableData();
              }
            })
          }).catch(() => {

          });
        }
      },

      deleteUser(index,row){
        let deleteArray = [{id:row.id}];
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAlreadyUser(deleteArray).then(res=>{
            if(res.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.getTableData();
            }else{
              this.$message({
                type: 'error',
                message: '删除失败'
              });
            }
          });
        }).catch(() => {

        });
      },

      editUser(index,row){
        this.userData = row;
        this.isShowEditDialog = true;
      },

      editUserPassword(index,row){
        this.updatePwdData = row;
        this.isShowUpdatePwdDialog = true;
      },

      //复选框选择的数据
      handleSelectionChange(obj){

      },

      clearSearchInfo(){
          this.requestData.map.user_id = "";
          this.requestData.map.user_name = "";
          this.requestData.map.user_nick_name = "";
          this.getTableData();
      },
      //每页的条数发生改变时调用
      handleSizeChange(size){
        this.requestData.pageSize = size;
        this.pageInfo.size = size;
        this.getTableData();
      },

      //页数发生改变时调用
      handleCurrentChange(page){
        this.requestData.pageNum = page;
        this.pageInfo.page = page;
        this.getTableData();
      },

      //关闭弹出框
      closeDialog(type){
        if(type == "edit"){
          this.isShowEditDialog = false;
        }else if(type == "pwd"){
          this.isShowUpdatePwdDialog = false;
        }
        this.getTableData();
      }

    }
  }
</script>
